<!--  记得import .js中自定义的方法-->
<!--这个页面是写死的，因为是为单个需求跳转页面，取消v-show="title === '编辑课程'"、:disabled之类的-->
<template>
  <div style="margin-top: 100px; margin-left: 300px">
    <h2 style="font-size: 36px;  margin-top: 6px; margin-left: 30px">Hello！Vue.js!</h2>
    <h2 style="font-size: 36px;  margin-top: 6px; margin-left: 30px">新增课程</h2>

    <el-form :model="selectCourse" :rules="selectCourseRules" ref="selectCourseRulesForm">

      <el-form-item label="课程号" prop="courseNo" v-model="keyword.courseNo" v-show="title === '编辑课程'">
        <el-input v-model="selectCourse.courseNo" autocomplete="off" style="width:500px" disabled></el-input>
      </el-form-item>

      <el-form-item label="课程名称" prop="courseName">
        <el-input v-model="selectCourse.courseName" autocomplete="off" style="width:500px"></el-input>
      </el-form-item>

      <el-form-item label="授课教师" prop="teacherName">
        <el-input v-model="selectCourse.teacherName" autocomplete="off" style="width:500px"></el-input>
      </el-form-item>

      <el-form-item label="教室容量" prop="roomCapacity">
        <el-input v-model="selectCourse.roomCapacity" autocomplete="off" style="width:500px"></el-input>
      </el-form-item>

    </el-form>


    <div style="font-size: 36px; font-family: 'LiSu'; margin-top: 6px; margin-left: 25px">
      注意:新增课程时，课程名称不能相同
    </div>

    <div slot="footer" class="dialog-footer" style="margin-top: 30px; margin-left: 400px">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="addCourse('selectCourseRulesForm')">确认添加
      </el-button>
    </div>

  </div>
</template>


<script>
import row from 'element-ui/packages/row'
// /////////////////      ///////////////////////////////////////
import { addCourse, getList, getList2, edit, deleteById, getList3, deletestudent } from '@/api/course'
import { mapGetters } from 'vuex'

export default {
  computed: {
    row() {
      return row
    },
    ...mapGetters([
      'name'
    ])
  },

  methods: {
    fetchData() { // 获取数据
      // 组装查询参数
      let params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        courseName: this.keyword.courseName     // 模糊查询用的
        // status: this.keyword.status,
        // measureName: this.keyword.measureName,
      }
      console.log(params)
      // getList是api/unit.js中自己
      getList(params).then(res => {
        let pageInfo = res.data
        // console.log("pageInfo", pageInfo)
        this.loading = false
        this.courseList = pageInfo.list
        // console.log("====>",this.payList)
        // list就是pageInfo中含所有属性的对象的集合
        //   对象的集合
        this.total = pageInfo.total
        console.log('使用以上参数,findAll查到共', this.total, '条数据')    // 打印总行数(不分页)

      })
    },

    openAddDialogInNewTab() {
      // const path = '/example/xz'; // 你的添加课程页面路由(修改为与你的路由配置中相匹配的路径 )
      const path = '/example/xz' // 你的添加课程页面路由(修改为与你的路由配置中相匹配的路径 )
      window.open(this.$router.resolve(path).href, '_blank')
      // _blank 参数和 window.open 调用，是用于在新窗口或新标签页，
      // Vue Router 提供了更适用于单页面应用（SPA）的导航方式。
    },
    openAddDialogInThisPage() {
      // 使用 Vue Router 的 push 方法在当前页面跳转
      this.$router.push('/example/xz')
    },

    openAddDialogInThisPage2() {
      // 使用 Vue Router 的 push 方法在当前页面跳转
      this.$router.push('/xz2')
    },

    fetchData2() { // 严格查找课程名称
      // 组装查询参数
      let params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        courseName: this.selectCourse.courseName
        // status: this.keyword.status,
        // measureName: this.keyword.measureName,
      }
      console.log('传参了吗？', params)
      // getList是api/unit.js中自己
      return getList2(params).then(res => {
        let pageInfo = res.data
        // console.log("pageInfo", pageInfo)
        this.loading = false
        this.courseList = pageInfo.list
        // console.log("====>",this.payList)
        // list就是pageInfo中含所有属性的对象的集合
        //   对象的集合
        this.total = pageInfo.total
        console.log('使用以上参数,findAll2查到共', this.total, '条数据')    // 打印总行数(不分页)
        return this.total
      })
    },

    /**  管理当前选课用的  */
    fetchData3() {
      // 组装查询参数
      let params = {
        pageNum: this.pageNum2,
        pageSize: this.pageSize2,
        cid: this.cid
      }
      console.log('传参了吗？', params)
      // getList是api/unit.js中自己

      getList3(params).then(res => {
        if (res.code == 20000) {
          this.loading = false
          this.courseList2 = res.data.list
          console.log('courseList2courseList2', this.courseList2)
          this.pageNum2 = res.data.pageNum
          this.total2 = res.data.total
        } else {
          this.$message({
            type: 'error',
            message: '查询失败',
            duration: 1000
          })
        }
        console.log('使用以上参数,findAll2查到共', this.total, '条数据')    // 打印总行数(不分页)
      })
    },

    handleSizeChange(val) {
      this.pageSize = val
      this.fetchData()
    },
    handleCurrentChange(val) {
      this.pageNum = val
      this.fetchData()
    },

    handleSizeChange2(val) {
      this.pageSize2 = val
      this.fetchData3()
    },
    handleCurrentChange2(val) {
      this.pageNum2 = val
      this.fetchData3()
    },

    //   模糊搜索
    search() {
      this.pageNum = 1
      this.fetchData()
    },

    // 打开添加对话框
    openAddDialog() {
      this.title = '新增课程'
      this.dialogFormVisible = true
    },
    // 另一个对话框
    manage(row) {
      this.selectCourse = row
      this.dialogFormVisible2 = true
      this.cid = this.selectCourse.courseNo
      this.fetchData3()
    },

    addCourse(formName) {
      this.$refs[formName].validate((valid) => {     // valid是个布尔值, => 后面是提交表格校验返回true时向后执行的代码
        if (valid) {
          // 上面是校验通过
          // 此处执行添加
          // console.log("添加status", this.selectCourse)
          this.fetchData2().then(total => {
            console.log('在Promise的then中获取到的总条数:', total)
            // 这里你可以使用total做其他事情
            console.log('重复条数：', this.total)
            if (this.total === 0) { // 不重复，才往里执行
              if (this.title === '新增课程') {
                addCourse(this.selectCourse).then(res => {
                  this.$message({
                    type: 'success',
                    message: '新增成功'
                  })
                  this.fetchData()
                  this.$refs[formName].resetFields()
                })
              } else if (this.title === '编辑课程') {
                edit(this.selectCourse).then(res => {
                  this.$message({
                    type: 'success',
                    message: '修改成功'
                  })
                  this.fetchData()
                  this.$refs[formName].resetFields()
                })
              }
            } else {
              console.log('重复条数不为0，为', this.total, '不执行添加或修改')
              this.$message({
                type: 'error',
                // type: 'warning',
                // type: 'info',
                message: '课程名称不可重复，请更换课程名称',
                duration: 2000
              })
              this.pageNum = 1 // 嗯
              this.fetchData()
              // setTimeout(() => {
              //   // 这里的this将指向调用setTimeout时所在的上下文中的this
              //   // 执行你需要在fetchData之后0.5秒执行的代码
              //   window.location.reload();
              // }, 1000);
            }
          })

        } else {
          console.log('error submit!!')
          return false
        }
        this.dialogFormVisible = false
      })
    },

    handleUpdate(a, b) {
      // console.log(a, b);
      console.log('打印a（本页行下标）', a)
      console.log('打印b（整行数据）', b)
      this.title = '编辑课程'
      this.selectCourse = b   // 回显
      this.dialogFormVisible = true
    },

    // ID删除
    handleDelete(row) {
      console.log('本课程当前选课人数为', row.number, '人')
      if (row.number === 0) {
        this.$confirm('确认删除 “' + row.courseName + '” 课程吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 发请求
          let params = {
            id: row.courseNo
          }
          deleteById(params).then(res => {
            this.$message({
              type: 'success',
              message: '删除成功',
              duration: 2000
            })
            this.fetchData()
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
            duration: 2000
          })
          this.fetchData()
        })
      } else {
        console.log('当前选课人数不为0，不准删除')
        this.$message({
          type: 'error',
          message: '当前选课人数不为0，不准删除',
          duration: 2000
        })
        this.fetchData()
      }
    },
    studentDelete(row) {
      this.$confirm('确认删除名为["' + row.sname + '"]的学生吗?', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let params = {
          sid: row.id,
          cid: this.cid
        }
        deletestudent(params).then(res => {
          if (res.code == 20000) {
            this.$message({
              type: 'success',
              message: '删除成功',
              duration: 1000
            })
            this.selectCourse.number = this.selectCourse.number - 1
            this.fetchData3()
          } else {
            this.$message({
              type: 'error',
              message: res.msg,
              duration: 1000
            })
          }
        })
      })
    }

  },
  name: 'SelectCourse',
  data() {
    return {
      // 遮罩层
      loading: true,
      // 单位表格数据
      courseList: [],
      courseList2: [],
      // 上面对应的this.courseList = pageInfo.list;  别忘了改，否则不显示
      pageNum: 1,     // 使刚进去时看到的是：查找完的第“几”页数据
      pageSize: 5,    // 这个数一定要和:page-sizes="[6,8,10,200]"中的第一个显示条目一样，否则丢失数据总数
      currentPage: 1, // 决定刚进去时显示选中第“几”页的页码，注意一定要currentPage == pageNum，否则二者显示的关系不对应
      total: 0,

      pageNum2: 1,     // 使刚进去时看到的是：查找完的第“几”页数据
      pageSize2: 3,    // 这个数一定要和:page-sizes="[6,8,10,200]"中的第一个显示条目一样，否则丢失数据总数
      currentPage2: 1, // 决定刚进去时显示选中第“几”页的页码，注意一定要currentPage == pageNum，否则二者显示的关系不对应
      total2: 0,

      cid: '',

      ids: [],
      keyword: {
        courseNo: null,
        courseName: null
        // status: null,
        // measureName: null,
      },
      title: '',
      dialogFormVisible: false,
      dialogFormVisible2: false,
      // inputValue: '',  // 在data()中声明inputValue，用于存储<el-autocomplete>的输入值
      // restaurants: [],
      // state1: '',
      // state2: '',
      selectCourse: {
        courseNo: null,
        courseName: null,
        teacherName: null,
        roomCapacity: null,
        number: null
        //   写不写scope.row都能获得整行数据，包括未显示的
      },
      selected: {
        id: null,
        name: null
      },

      // options: [{
      //   value: '采购中',
      // }, {
      //   value: '待采购',
      // }, {
      //   value: '已驳回',
      // },],
      // value: '',

      // rule1
      // rule
      // rule
      // rule
      selectCourseRules: {
        courseName: [
          { required: true, message: '课程名称不能为空', trigger: 'blur' }
        ],
        teacherName: [
          { required: true, message: '授课教师不能为空', trigger: 'blur' }
        ],
        roomCapacity: [
          { required: true, message: '教室容量不能为空', trigger: 'blur' }
        ]

      }

    }
  },
  created() {
    this.fetchData()
  }
}
</script>
<style scoped>

</style>
